<template>
   <div>
      <!-- <Pie></Pie> -->
      <Card>
         <div class="pieBox">
            <div v-for="item in listdata" :key="item.id" class="item">
              <Pie  :id="item.id"></Pie>
              <div>
                  <div style="font-size: 16px;">{{ item.name }}</div>
                  <div style="font-size: 20px;margin-top:10px">{{ item.count }}</div>
              </div>
            </div>
         </div>
      </Card>
   </div>
</template>
<script setup>
import * as echarts from 'echarts'
import Pie from './pie.vue'
import Card from '../card.vue'
import { ref } from "vue" 
const listdata = [{
   name: '正常台数',
   id: 'pie1',
   color: '#29b8db',
   count:'18,164'
},
{
   name: '异常台数',
   id: 'pie2',
   color: '#f1222d',
   count:'1,343'
   },
{
   name: '预警台数',
   id: 'pie3',
   color: '#f9ac14',
   count: '1,343'
   },
{
   name: '红会台数',
   id: 'pie4',
   color: '#f9ac14',
   count: '1,343'
   },
{
   name: '离线台数',
   id: 'pie6',
   color: '#f9ac14',
   count: '1,343'
   },
{
   name: '科普台数',
   id: 'pie5',
   color: '#f9ac14',
   count: '1,343'
}
]
</script>

<style scoped lang="css" >
.pieBox{
   color: #fff;
   width: 100%;
   flex-wrap: wrap;
   display: flex;
}
.item{
   display: flex;
   align-items: center;
}
</style> 